<template>
  <div v-if="cinema && films">
    <van-sticky :offset-top="0">
      <div class="navbar">
        <van-icon class="navcross" name="arrow-left" @click="$router.back()"/>
        <div class="nav-title">影院详情</div>
      </div>
    </van-sticky>

    <div class="header-title">{{ cinema.name }}</div>


    <div class="cinema-wrap">

      <div class="cinema-info">
        <div class="tags" v-if="cinema.services">
          <div class="tag" v-for="(n,i) in cinema.services" :key="i">{{ n.name }}</div>
        </div>
        <div class="address">
          <img class="location" src="../assets/location.png" alt="">
          <div class="address-name">{{ cinema.address }}</div>
          <a :href="'tel:' + cinema.telephones[0]"><img class="phone" src="../assets/phone.png" alt=""></a>
        </div>
      </div>

      <!-- 有电影场次的信息的话展示 -->
      <div class="schedule-wrap" v-if="!zanwu">

        <div class="film-list">
          <van-swipe @change="change" :show-indicators="false">
            <van-swipe-item v-for="item in films" :key="item.filmId">
              <img v-lazy="item.poster" alt="" />
            </van-swipe-item>
          </van-swipe>
          <div class="triangle">
            <img src="../assets/arrowupper.png" alt="">
          </div>
        </div>

        <div class="film-info" v-if="film_info" @click="$router.push('/detail/'+film_info.filmId)">
          <div class="film-head">
            <span class="film-name">{{ film_info.name }}</span>
            <span class="film-score">{{ film_info.grade }}</span>
            <span class="film-score-unit">分</span>
          </div>
          <div class="film-desc">
            {{ film_info.category }} | {{ film_info.runtime }}分钟 | {{ film_info.director }} | {{ film_info.actors | actorFilter }}
          </div>
          <img src="../assets/cinemadetailarrow-r.png" alt="">
        </div>

        <div class="date-list">
          <ul class="tabs-nav">
            <li v-for="(n,i) in playdate" :key="i" @click="activeClick(i,n)">
              <span :class="isactive==i ? 'activeclass' : ''">{{ n | dateFilter }}</span>
            </li>
          </ul>
        </div>

        <div class="schedule-list">
          <div class="schedule-item" @click="cinemaClick" v-for="item in schedules" :key="item.scheduleId">
            <div class="left">
              <div class="start-at">{{ item.showAt | timefilter }}</div>
              <div class="end-at">{{ item.endAt | timefilter }}散场</div>
            </div>
            <div class="middle">
              <div class="language">{{ item.filmLanguage }}{{ item.imagery }}</div>
              <div class="hall">{{ item.hallName }}</div>
            </div>
            <div class="right">
              <div class="buy-ticket">购票</div>
              <div class="lowest-price">
                <span class="price-icon">￥</span>
                <span>{{ item.salePrice / 100 }}</span>
              </div>
            </div>
          </div>
          <div class="list-bottom">暂无更多了哟</div>
        </div>
      </div>
      <!-- 没电影场次的信息的话展示 -->
      <div  class="schedule-list-empty" v-else>
        <div class="img-wrap">
          <img src="../assets/cinemaempty.png" alt="">
        </div>
        <div class="empty-tip">
          暂无场次
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../request/http'
import moment from 'moment'
export default {
  name: 'CinemaDetail',
  data() {
    return {
      // 影院信息
      cinema: null,
      // 电影信息
      films: [],
      film_info: null,
      // 播放日期
      playdate: [],
      // 电影院里没有一个电影的信息(true代表没有场次，false代表有)
      zanwu: false,
      // 当前处于高亮的tab标签
      isactive: 0,
      // 电影的id
      moveid: 0,
      // 电影场次详细信息
      schedules: [],
      // 电影院有电影的信息，但是没有几号几号的排片信息(true代表没有，false代表有)
      playmovedate: false
    }
  },
  methods: {
    // 轮播图改变事件
    change(index) {
      this.film_info = this.films[index]
      this.moveid = this.films[index].filmId
      this.playdate = this.films[index].showDate
      this.isactive = 0
      // 轮播图改变获取电影场次信息
      http({
        url: `/gateway/?filmId=${this.moveid}&cinemaId=${this.$route.params.id}&date=${this.playdate[0]}&k=9078974`,
        headers: {
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then(res => {
        if (res.status == 0) {
          this.schedules = res.data.schedules
        } else {
          return
        }
      })
    },
    // 点击哪个tab标签，给哪个标签设置一个class样式，处于高亮状态
    activeClick(index,date) {
      //将点击的元素的索引赋值给变量
      this.isactive = index
      // 获取电影场次信息
      http({
        url: `/gateway/?filmId=${this.moveid}&cinemaId=${this.$route.params.id}&date=${date}&k=9078974`,
        headers: {
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then(res => {
        if (res.status == 0) {
          this.schedules = res.data.schedules
        } else {
          return
        }
      })
    },
    // 点击购票
    cinemaClick() {
      this.$toast('抱歉，疫情期间暂不观影')
    }
  },
  mounted() {
    // 获取电影院信息
    http({
      url: `/gateway?cinemaId=${this.$route.params.id}&k=335057`,
      headers: {
        'X-Host': 'mall.film-ticket.cinema.info'
      }
    }).then(res => {
      let { cinema } = res.data
      this.cinema = cinema
    })

    // 获取电影院电影详情信息
    http({
      url: `/gateway?cinemaId=${this.$route.params.id}&k=335057`,
      headers: {
        'X-Host': 'mall.film-ticket.film.cinema-show-film'
      }
    }).then(res => {
      let { films } = res.data
      this.films = films
      if (this.films.length !==0 ) {
        this.film_info = this.films[0]
        this.playdate = this.film_info.showDate
        this.moveid = this.film_info.filmId
        // 获取电影场次信息
        http({
          url: `/gateway/?filmId=${this.films[0].filmId}&cinemaId=${this.$route.params.id}&date=${this.films[0].showDate[0]}&k=9078974`,
          headers: {
            'X-Host': 'mall.film-ticket.schedule.list'
          }
        }).then(res => {
          if (res.status==0) {
            this.schedules = res.data.schedules
          } else {
            return
          }
        })
      } else {
        this.zanwu = true
      }
    })
  },
  filters: {
    // 有时候会有电影没有主演的情况，这个时候页面用actors的值就会报错，所以在这儿做一下判断，如果有的话，就把actors数组中每一个值取出来过滤一下返回
    actorFilter(actors) {
      if (actors === undefined) return '暂无主演'
      return actors.map(item => item.name).join(' ')
    },
    // 日期过滤
    dateFilter(date) {
      return moment(date * 1000).format('MM月DD日')
    },
    // 时间过滤器
    timefilter(time) {
      return moment(time * 1000).format('HH:mm')
    }
  }
}
</script>

<style>
.van-sticky--fixed {
  z-index: 999;
}
</style>

<style scoped>
div {
  box-sizing: border-box;
}
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  height: .45rem;
  line-height: .45rem;
}
.nav-title {
  text-align: center;
  font-size: .16rem;
}
.navcross {
  position: absolute;
  padding-left: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .2rem;
  color: #ff5f16;
}





.header-title {
  position: relative;
  text-align: center;
  font-size: .17rem;
  color: #191a1b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 0 15px;
  background: #fff;
  top: 0;
  height: .44rem;
  line-height: .44rem;
  z-index: 302;
}




.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffb232;
  overflow: hidden;
  padding: 5px 0 15px;
}
.tags .tag {
  padding: 2px 6px;
  margin: 0 2.5px;
  font-size: .10rem;
  border: 1px solid #ffb232;
}





.address {
  height: .50rem;
  position: relative;
  display: flex;
  padding-left: .17rem;
  align-items: center;
}
.address-name {
  font-size: .14rem;
  height: .20rem;
  line-height: .20rem;
  padding: 0 .12rem;
  flex: 1;
  position: relative;
  color: #191a1b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.location {
  width: .14rem;
  height: .21rem;
}
.phone {
  height: .18rem;
  padding: 0 .25rem;
}





.film-list {
  height: 1.60rem;
  position: relative;
  /* background: #ff7f00; */
  /* background: #ededed; */
  /* background: #bfc6c4; */
  background: url('../assets/backcinema.png') no-repeat;
  background-size: cover;
}
.triangle {
  position: absolute;
  height: .10rem;
  width: 100%;
  bottom: 0;
}
.triangle img {
  position: absolute;
  width: .20rem;
  height: .10rem;
  left: 50%;
  transform: translateX(-50%);
}






.van-swipe-item {
  height: auto;
  text-align: center;
}
.van-swipe-item  img {
  width: 1.0rem;
  height: 1.5rem;
}





.film-info {
  width: 100%;
  background: #fff;
  height: .80rem;
  padding: 15px 0;
  position: relative;
  border-bottom: 1px solid #ededed;
}
.film-head {
  margin-bottom: 10px;
  text-align: center;
  line-height: 18px;
}
.film-name {
  font-size: .15rem;
  color: #191a1b;
  padding-right: 5px;
}
.film-score {
  font-size: .16rem;
  font-style: italic;
  color: #ffb232;
}
.film-score-unit {
  font-size: .10rem;
  color: #ffb232;
}
.film-desc {
  text-align: center;
  height: 18px;
  color: #797d82;
  font-size: .13rem;
  padding: 0 12%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.film-info img {
  position: absolute;
  width: 4px;
  height: 8px;
  right: 15px;
  top: 0;
  margin-top: 36px;
}







.date-list {
  width: 100%;
  height: .49rem;
  line-height: .43rem;
}
.tabs-nav {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  text-align: center;
}
.tabs-nav li {
  width: .85rem;
  min-width: .85rem;
}
.tabs-nav li span {
  display: inline-block;
}
.date-list::-webkit-scrollbar {
  display: none;
}
.tabs-nav::-webkit-scrollbar {
  display: none;
}
.activeclass {
  color: #ff5f16;
  border-bottom: 2px solid #ff5f16;
}






.schedule-list .list-bottom {
  /* min-height: calc(100vh - 44px); */
  height: 20px;
  text-align: center;
  color: #ccc;
  font-size: 12px;
}
.schedule-item {
  height: 74px;
  padding: 15px;
  position: relative;
  background: #fff;
  border-top: 1px solid #ededed;
}
.schedule-item .left {
  float: left;
  width: 84px;
}
.schedule-item .middle {
  float: left;
  width: calc(100% - 210px);
}
.schedule-item .right {
  float: right;
  padding: 10px 0;
  line-height: 25px;
  color: #ff5f16;
}
.schedule-item .left .start-at {
  font-size: 15px;
  color: #191a1b;
  margin-top: 5px;
}
.schedule-item .left .end-at {
  font-size: 13px;
  color: #797d82;
  margin-top: 10px;
}
.schedule-item .middle .language {
  font-size: 15px;
  color: #191a1b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}
.schedule-item .middle .hall {
  font-size: 13px;
  color: #797d82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
.schedule-item .right .buy-ticket {
  float: right;
  height: 25px;
  width: 50px;
  font-size: 13px;
  line-height: 25px;
  border-radius: 2px;
  position: relative;
  text-align: center;
}
.schedule-item .right .buy-ticket::after {
  content: " ";
  transform: scale(.5);
  position: absolute;
  border: 1px solid #ff5f16;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}
.schedule-item .right .lowest-price {
  float: right;
  padding-right: 20px;
  font-size: 15px;
}






.schedule-list-empty {
  height: 18px;
  padding: 40px 0 44px;
}
.schedule-list-empty .img-wrap {
  height: 70px;
  width: 70px;
  margin: 0 auto 10px;
}
.schedule-list-empty .img-wrap img {
  width: 100%;
  height: 100%;
}
.empty-tip {
  text-align: center;
  color: #bdc0c5;
  font-size: 14px;
}
</style>